<template>
  <div class="main wrap">
    <div class="user-home-header" style="width: 1205px">
      <div class="avatarRing"></div>
      <div class="inner clearfix">
        <div class="avatar">
          <div class="img-box">
            <img :src="
                                userInfo.src ||
                                require('src/assets/imgs/use.png')
                            " />
          </div>
          <div class="counts clearfix">
            <!-- <div class="point">
                            <div class="num">285</div>
                            <div class="sub">积分</div>
                        </div> -->
            <!-- <div class="follows">
                            <div id="followerCount" class="num">2</div>
                            <div class="sub">粉丝</div>
                            <input type="hidden" id="_userName" value="test" />
                        </div> -->
          </div>
        </div>
        <div class="head-line">
          <!-- <div class="name">test</div> -->
          <!-- <div class="grade">小有名气</div> -->
        </div>
        <div class="nickname">呢称：{{ userInfo.nickName }}</div>
        <div class="role">
          <span class="userRoleName" @click="dialogInfoVisible = true">修改信息</span>
          <span class="userRoleName" @click="dialogVisible = true" style="margin-left:10px">重置密码</span>
        </div>
        <div class="clearfix"></div>
        <div class="action-button"></div>
      </div>
    </div>
    <div class="selfService clearfix">
      <div class="box">
        <ul class="ul">
          <li class="item" @click="changeType('/myArticle')">
            <a class="a-pic" href="javascript:void(0);">
              <div class="img cms-topic"></div>
            </a>
            <h4 class="title">
              <a class="a-title" href="javascript:void(0);">我的话题</a>
            </h4>
          </li>
          <li class="item" @click="changeType('/myComment')">
            <a class="a-pic" href="javascript:void(0);">
              <div class="img cms-comment"></div>
            </a>
            <h4 class="title">
              <a class="a-title" href="javascript:void(0);">我的评论</a>
            </h4>
          </li>
          <li class="item" @click="changeType('/myReply')">
            <a class="a-pic" href="javascript:void(0);">
              <div class="img cms-reply" style="width: ; height: "></div>
            </a>
            <h4 class="title">
              <a class="a-title" href="javascript:void(0);">我的回复</a>
            </h4>
          </li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
  </div>

  <div v-if="dialogVisible">
    <el-dialog :width="500" title="修改密码" center :model-value="dialogVisible" :before-close="dialogClick">
      <edit-pwd @sure="dialogSure" />
    </el-dialog>
  </div>
  <div v-if="dialogInfoVisible">
    <el-dialog :width="500" title="修改信息" center :model-value="dialogInfoVisible" :before-close="dialogCloseClick">
      <edit-info @sure="dialogInfoSure" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, ref } from 'vue';
import store from 'src/store';
import userHooks from 'src/hooks/userHooks';
import { modifyUser, modifyPwd } from 'src/plugins/http/server/sys/user';
import { msgFn } from 'src/utils';
import editInfo from './editInfo/index.vue';
import editPwd from './editPwd/index.vue';

export default {
    'components': {
        editInfo,
        editPwd
    },
    setup() {
        const userInfo = computed(() => store.state.userInfo);
        const { router } = userHooks({});
        const dialogInfoVisible = ref(false);
        const dialogCloseClick = () => {
            dialogInfoVisible.value = !dialogInfoVisible.value;
        };
        const dialogInfoSure = (params: any) => {
            modifyUser({ 'data': params })
                .then(() => {
                    store.commit(
                        '_modifyInfo',
                        UtilTools.extend(store.state.userInfo, params)
                    );
                    dialogInfoVisible.value = !dialogInfoVisible.value;
                    msgFn('修改信息成功', 'success');
                })
                .catch(e => {
                    msgFn(e);
                });
        };
        const changeType = (path: string) => {
            router.push(path);
        };

        const dialogVisible = ref(false);
        const dialogClick = () => {
            dialogVisible.value = !dialogVisible.value;
        };
        const dialogSure = (params: any) => {
            modifyPwd({ 'data': params })
                .then(res => {
                    store.commit('_logout', {});
                    dialogVisible.value = !dialogVisible.value;
                    msgFn('修改密码成功', 'success');

                    setTimeout(() => {
                        window.location.href = `${window.location.origin}/#/login`;
                    }, 1000);
                })
                .catch(e => {
                    msgFn(e);
                });
        };
        return {
            userInfo,
            dialogInfoVisible,
            dialogVisible,
            changeType,
            dialogCloseClick,
            dialogClick,
            dialogInfoSure,
            dialogSure
        };
    }
};
</script>
<style lang='less' scoped>
@import '~@/views/userInfo/index.less';
</style>